<template>
<div>
  <el-card>
 <div slot="header" class="clearfix">
    <span>{{$route.query.id?'试题修改':'试题录入'}}</span>
  </div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!-- <phop/> -->

  <el-form-item label="学科" prop="subjectID">
    <el-select v-model="ruleForm.subjectID" placeholder="请选择" class="gg" @change="changeOnDutyHeaderAA">
       <el-option   v-for="item in subjectID" :key="item.id" :value="item.value" :label="item.label"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="目录" prop="catalogID">
    <el-select v-model="ruleForm.catalogID" placeholder="请选择" class="gg">
     <el-option   v-for="item in simpleml" :key="item.id" :value="item.id" :label="item.directoryName"></el-option>

    </el-select>
  </el-form-item>
  <el-form-item label="企业" prop="enterpriseID">
    <el-select v-model="ruleForm.enterpriseID" placeholder="请选择" class="gg">
      <el-option   v-for="item in enterpriseID" :key="item.id" :label="item.shortName" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="城市" required>

    <el-col :span="3">
      <el-form-item prop="province">
        <el-select v-model="ruleForm.province" placeholder="请选择城市" @change="changeOnDutyHeaderBB">
           <el-option   v-for="(item,index) in citycs" :key="index" :value="item" :label="item"></el-option>
         </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="11" >
      <el-form-item prop="city">
          <el-select v-model="ruleForm.city" placeholder="请选择区域" >
            <el-option v-for="(item,index) in cityqy" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-form-item>

  <el-form-item label="方向" prop="direction">
    <el-select v-model="ruleForm.direction" placeholder="请选择" class="gg">
      <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="题型" prop="questionType">
      <el-radio v-model="ruleForm.questionType"  v-for="(item,index) in questionType" :key="index" :label="item.value.toString()" @change="fn">{{item.label}}</el-radio>
  </el-form-item>

   <el-form-item label="难度" prop="difficulty">
      <el-radio v-model="ruleForm.difficulty"  v-for="(item,index) in difficulty" :key="index" :label="item.value.toString()">{{item.label}}</el-radio>
  </el-form-item>

   <el-form-item label="题干" prop="question" class="quill">
   <quill-editor :options="editorOption" v-model="ruleForm.question" class="quill-editor"></quill-editor>
  </el-form-item>

    <el-form-item label="选项" v-show="key" v-model="ruleForm.options">
              <!-- 单选 -->
              <el-form-item v-if="+o===1">
                  <div v-for="(item,index) in english" :key="index" class="f">
                    <el-radio  v-model="item.isRight" @change="changeData(index)" :label="Boolean('true')" >
                          {{item.code+":"}}
                      <el-input v-model="item.title"></el-input>
                  </el-radio>
                   <phop class="z"/>
                  </div>
                  <el-button type="danger" disabled >+增加选项与答案</el-button>

              </el-form-item>
              <!-- 多选 -->
              <el-form-item v-else-if="+o===2">
                <div v-for=" (item,index) in english" :key="index" class="f">
                  <el-checkbox v-model="item.isRight" class="gg1" >
                      {{item.code+":"}}
                      <el-input v-model="item.title"></el-input>
                  </el-checkbox>
                   <phop class="z"/>
                </div>

                <br>
                  <el-button type="danger" @click="addDomain">+增加选项与答案</el-button>
              </el-form-item>

    </el-form-item>

  <el-form-item label="解析视频" prop="videoURL">
    <el-input v-model="ruleForm.videoURL" class="gg"></el-input>
  </el-form-item>

 <el-form-item label="答案解析" prop="answer" class="quill">
   <quill-editor  :options="editorOption" v-model="ruleForm.answer" class="quill-editor"></quill-editor>
  </el-form-item>

  <el-form-item label="题目备注" prop="remarks">
    <el-input type="textarea" v-model="ruleForm.remarks" class="gg"></el-input>
  </el-form-item>

  <el-form-item label="试题标签" prop="tags"  >
    <el-select v-model="ruleForm.tags" placeholder="请选择" class="gg" multiple>
      <el-option v-for="item in labeLse" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm">{{$route.query.id?'确认修改':'确认提交'}}</el-button>
  </el-form-item>
     </el-form>
  </el-card>
</div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys'
import { list } from '@/api/hmmm/directorys'
import { enterprise } from '@/api/hmmm/enterprise'
import { direction, difficulty, questionType } from '@/api/hmmm/constants'
import { labelse } from '@/api/hmmm/labelse'
import hljs from 'highlight.js'

import phop from '../components/phop.vue'
import { add, update, detail } from '@/api/hmmm/questions'
// import 'highlight.js/styles/xcode.css'

export default {
  components: { phop },
  data () {
    return {
      english: [
        {
          code: 'A',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'B',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'C',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'D',
          title: '',
          img: '',
          isRight: false
        }
      ], // 选项

      // 选项
      dynamicValidateForm: {
        domains: [{
          value: ''
        }]
      },
      // 选项显示隐藏
      key: true,

      showdig: true, // 点击简答隐藏
      simpleml: [], // 目录
      subjectID: [], // 学科
      citycs: {}, // 城市
      cityqy: {}, // 区域
      fileList: [], // 图片上传
      enterpriseID: [], // 企业
      direction, // 方向
      labeLse: [], // 试题标签
      difficulty, // 难度
      questionType, // 题型
      i: [],
      o: 1,
      id: '',
      radioer: '1',
      ruleForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [],
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: [] // 试题标签,
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold',
              'italic',
              'underline',
              'strike',
              'blockquote',
              'code-block',
              'link'
            ]
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        }
      },
      rules: {
        // 学科
        subjectID: [
          { required: true, message: '学科不能为空', trigger: ['blur', 'change'] }
        ],
        // 目录
        catalogID: [
          { required: true, message: '目录不能为空', trigger: ['blur', 'change'] }
        ],
        // 企业
        enterpriseID: [
          { required: true, message: '企业不能为空', trigger: ['blur', 'change'] }
        ],
        // 方向
        direction: [
          { required: true, message: '方向不能为空', trigger: ['blur', 'change'] }
        ],
        // 城市
        province: [
          { required: true, message: '城市不能为空', trigger: ['blur', 'change'] }

        ],
        // 单选
        radio: [
          { required: true, message: '选择题型不能为空', trigger: ['blur', 'change'] }
        ],
        // 难易程度
        difficulty: [
          { required: true, message: '选择难度不能为空', trigger: ['blur', 'change'] }
        ],
        // 题型
        questionType: [
          { required: true, message: '选择题型不能为空', trigger: ['blur', 'change'] }
        ],
        city: [
          { required: true, message: '地区不能为空', trigger: ['blur', 'change'] }
        ],
        question: [
          { required: true, message: '题干不能为空', trigger: ['blur', 'change'] }
        ],
        answer: [
          { required: true, message: '题干不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created () {
    this.enterprise()
    this.list()
    // 初始化调用该方法才能发送渲染数据请求
    this.city()
    this.zimu()
    this.fn(this.o)

    if (this.$route.query.id) {
    // console.log(this.$route.query.id)
      this.getRouterData()
    // console.log(this.getRouterData())
    }
  },
  methods: {
    // 初始化表单
    async  getRouterData () {
      this.id = this.$route.query.id
      const { data } = await detail({ id: +this.id })
      // console.log(data)
      // console.log(res.data.questionType)
      this.o = data.questionType
      this.ruleForm = data
      // 最下边的tags转换
      if (data.tags) {
        this.ruleForm.tags = data.tags.split(',')
      }
      // 城市回显
      this.city = citys(data.province)
      // 目录转换
      this.changeOnDutyHeaderAA(data.subjectID)
      // 第一个的文本框

      // console.log(this.ruleForm.options)
      const arr = data.options.map(item => {
        if (item.isRight === 0) {
          item.isRight = false
        } else {
          item.isRight = true
        }
        return item
      })
      arr.sort(function (a, b) { // 选项顺序排列
        return a.id - b.id
      })
      this.ruleForm.options = arr
      this.english = this.ruleForm.options
    },
    zimu () {
      const letterArr = []
      for (var i = 65, j = 0; i < 91; i++, j++) {
        letterArr[j] = String.fromCharCode(i)
      }
      this.i = letterArr
      // console.log(this.i)
    },
    // 新增选项
    addDomain () {
      let index = this.english.length
      this.english.push({
        code: this.i[index++],
        title: '',
        id: Date.now()
      })
    },
    // 点击简答隐藏选项
    fn (e) {
      this.o = e
      // console.log(this.o)
      // console.log(e)
      if (+e === 1) { // 显示单选
        this.key = true
        this.ruleForm.options = this.english
        // this.o = 1
        // console.log(this.o)
      } else if (+e === 2) { // 显示多选
        this.key = true
        this.ruleForm.options = this.englishs
        // this.o = 2
        this.disabled = false
      } else { // 全部隐藏
        this.key = false
        this.ruleForm.options = []
      }
    },
    // 下拉学科联动 - 标签联动
    async changeOnDutyHeaderAA (str) {
      const { data } = await list({ subjectID: str.value })
      const res = await labelse({ subjectID: str.value })
      this.labeLse = res.data
      this.simpleml = data.items
    },
    // 下拉城市联动
    changeOnDutyHeaderBB (val) {
      const res = citys(val)
      this.cityqy = res
    },
    // 企业
    async enterprise () {
      const { data } = await enterprise()
      this.enterpriseID = data.items
      // console.log(this.enterpriseID)
    },
    city () { // 渲染城市列表
      const res = provinces()
      this.citycs = res
    },
    // 学科
    async list () {
      const { data } = await simple()
      this.subjectID = data
    },

    submitForm () { // 提交
      // console.log(this.ruleForm)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            this.$confirm('确定修改, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              this.ruleForm.tags = this.ruleForm.tags.join(',')
              const res = await update(this.ruleForm)
              if (res.status === 200) {
                this.$router.push({
                  path: '/questions/list'
                })
              }
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '修改失败'
              })
            })
          } else {
            this.$confirm('确定提交, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              this.ruleForm.tags = this.ruleForm.tags.join(',')
              const res = await add(this.ruleForm)
              if (res.status === 200) {
                this.$router.push({
                  path: '/questions/list'
                })
              }
              this.$message({
                type: 'success',
                message: '提交成功!'
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '提交失败'
              })
            })
          }
        }
      })
    },
    // 题目单选选中当前
    changeData (index) {
      this.english.forEach((item, idx) => {
        if (index !== idx) {
          item.isRight = false
        }
      })
    }
  }
}
</script>
<style scoped>
/* .yc{
  display:none
} */
.f{
  position: relative;
}
.z{
  position: absolute;
  top: 10px;
  left: 300px;
}
.gg{
  width: 400px;
}
.gg1{
  margin-top: 20px;
   width: 400px;
}
.el-radio{
  margin-top: 20px;
}
.el-button{
  margin-top: 20px;
}
.quill{
  height: 240px;
}
.quill-editor{
  width: 1200px;
  height: 200px;
}
</style>
